<template>
  <div class="dashboard">
    <!-- 数据概览 -->
    <div class="statistics">
      <StatisticCard
        v-for="item in statisticsData"
        :key="item.title"
        v-bind="item"
      />
    </div>

    <!-- 图表区域 -->
    <div class="charts">
      <a-row :gutter="[16, 16]">
        <a-col :span="24" :lg="16">
          <a-card 
            title="就诊趋势分析" 
            :bordered="false"
            class="chart-wrapper hover-shadow"
          >
            <VisitChart />
          </a-card>
        </a-col>
        <a-col :span="24" :lg="8">
          <Card
            title="科室就诊分布" 
            :bordered="false"
            class="chart-wrapper hover-shadow mt-5"
          >
            <DeviceChart />
          </Card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import StatisticCard from '@/components/dashboard/StatisticCard.vue'
import VisitChart from '@/components/charts/VisitChart.vue'
import DeviceChart from '@/components/charts/DeviceChart.vue'
import { Card } from 'ant-design-vue'
import {
  TeamOutlined,
  MedicineBoxOutlined,
  FileTextOutlined,
  AlertOutlined
} from '@ant-design/icons-vue'

const statisticsData = ref([
  {
    title: '今日就诊',
    number: '234',
    unit: '人次',
    rate: '12%',
    trend: 'up' as const,
    icon: TeamOutlined,
    type: 'primary' as const
  },
  {
    title: '住院人数',
    number: '846',
    unit: '人',
    rate: '8%',
    trend: 'up' as const,
    icon: MedicineBoxOutlined,
    type: 'success' as const
  },
  {
    title: '手术台数',
    number: '56',
    unit: '台',
    rate: '3%',
    trend: 'down' as const,
    icon: FileTextOutlined,
    type: 'warning' as const
  },
  {
    title: '急诊人数',
    number: '68',
    unit: '人次',
    rate: '15%',
    trend: 'up' as const,
    icon: AlertOutlined,
    type: 'danger' as const
  }
])
</script>

<style scoped lang="less">
.dashboard {
  height: 100%;
  overflow: auto;
  padding-bottom: 1.5rem;

  .statistics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .charts {
    .chart-wrapper {
      transition: all 0.3s;
      background: #fff;
      border-radius: 0.5rem;
      
      &.hover-shadow:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style> 